<template>
    <OAMain title="通知详情">
        <el-card>
            <template #header>
                 <div style="text-align: center;">
                    <h2>{{inform.title}}</h2>
                    <div>
                        <span style="margin-right: 20px;'">作者:{{inform.author.realname}}</span>
                        <span style="margin-right: 20px;'">部门:{{inform.author.department.name}}</span>
                        <span>发布时间:{{dateformat.stringFromDate(inform.create_time)}}</span>
                    </div>
                 </div> 
            </template>
            <template #default>
                <div v-html="inform.content" class="content"></div>
            </template>
            <template #footer>
                阅读量：{{ inform.read_count }}
            </template>
        </el-card>
    </OAMain>
</template>

<script setup name="informDetail">
import { ref, reactive, onMounted } from 'vue'
import OAMain from '@/components/OAMain.vue';
import OAPagination from '@/components/OAPagination.vue';
import OADialog from '@/components/OADialog.vue';
import { useAuthStore } from '@/stores/auth';
import informHttp from '@/api/informHttp';
import { ElMessage } from 'element-plus';
import {useRoute} from 'vue-router';
import dateformat from '@/utils/dateformat';
const router = useRoute();

let inform = reactive({
    title: '',
    content: '',
    create_time: '',
    author:{
        realname:'',
        department:{
            name:''
        }
    }
})
onMounted(async () => {
    try {
        const pk=router.params.pk
        let data = await informHttp.getInformDetail(pk)
        Object.assign(inform, data)
    } catch (detail) {
        ElMessage.error(detail)
    }
    await informHttp.readInform(router.params.pk)

})
</script>

<style scoped>
.content::v-deep(img){
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
</style>